<template>
  <div>
    <el-dialog :visible.sync="dialogFormVisible" :title="title">
      <el-form>
        <el-form-item :label-width="formLabelWidth" label="课时标题">
          <el-input v-model="video.title" autocomplete="off"/>
        </el-form-item>
        <!-- 视频上传组件 -->
        <el-form-item :label-width="formLabelWidth" label="课时视频上传">
          <el-upload
            ref="upload"
            :on-success="handleSuccess"
            :auto-upload="false"
            :action="uploadPath"
            class="upload-demo">
            <el-button slot="trigger" size="small" type="primary">选取视频</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过200M</div>
          </el-upload>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="课时排序">
          <el-input-number v-model="video.sort" :min="1" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="是否免费">
          <el-radio v-model="video.free" :label="0">收费</el-radio>
          <el-radio v-model="video.free" :label="1">免费</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateVideo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import videoApi from '@/api/video'
export default {
  data() {
    return {
      uploadPath: `http://localhost:8130/admin/vod/uploadVideo/1`,
      title: '添加课时',
      video: {
        sort: 1,
        free: 1
      },
      formLabelWidth: '120px',
      dialogFormVisible: false
    }
  },
  methods: {
    // 上传成功回调
    handleSuccess(res, file) {
      this.video.videoSourceId = res.data.id
      this.video.videoOriginalName = file.name
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    open(videoId) { // 打开对话框 回显要更新章信息
      this.title = '更新课时'
      videoApi.getById(videoId).then(r => {
        this.video = r.data.item
        // / 后端free的值是boolean类型，前端需要使用数值型
        this.video.free = this.video.free ? 1 : 0
        this.dialogFormVisible = true
      })
    },
    close() {
      // 清空上传缓存
      this.$refs.upload.clearFiles()
      // 清空缓存
      this.video = {
        sort: 1,
        free: 1
      }
      // 关闭对话框
      this.dialogFormVisible = false
    },
    saveOrUpdateVideo() {
      if (!this.video.id) {
        this.save()
      } else {
        this.update()
      }
    },
    save() {
      // 当前页面显示时，如果是新增，父页面已经给当前页面的video设置了 课程id和章id
      videoApi.save(this.video).then(r => {
        this.$message.success('新增课时成功')
        this.$parent.getChaptersAndVideos()// 刷新章节列表
        this.close()// 关闭对话框
      })
    },
    update() {
      videoApi.update(this.video).then(r => {
        this.$message.success('更新课时成功')
        this.$parent.getChaptersAndVideos()// 刷新章节列表
        this.close()// 关闭对话框
      })
    }
  }
}
</script>
